<template>
  <div class="edgeConditionContainer">
    <div class="top">
      <div
        v-for="item in durationList"
        :key="item.id"
        :style="{
          color: currentDuration === item.type ? '#1AA1FB' : '#5E5E5E',
          backgroundColor: currentDuration === item.type ? '#fff' : '#f2f2f2',
        }"
        class="topItem"
        @click="handleDuration(item.type)"
      >
        {{ item.name }}
      </div>
      <!--   滑块   -->
      <!--      <div class="slider"></div>-->
    </div>
    <div v-show="currentDuration === 'before'" class="content">
      <div class="empty">
        <img src="@/assets/lifecycle/empty.svg" />
        <div class="tip">
          暂无条件，<span @click="handleSettingBefore" style="color: #1aa1fb"
            >迁移条件</span
          >
        </div>
      </div>
    </div>
    <div v-show="currentDuration === 'duration'">
      <div class="label">设置字段与值</div>
      <div class="content">
        <div class="empty">
          <img src="@/assets/lifecycle/empty.svg" />
          <div class="tip">
            暂无条件，<span style="color: #1aa1fb">迁移条件</span>
          </div>
        </div>
      </div>
      <div class="label">关联审批流程</div>
      <el-select style="width: 100%"></el-select>
    </div>
    <div v-show="currentDuration === 'after'">
      <div class="label">发送站内信</div>
      <el-input
        type="textarea"
        placeholder="请输入"
        resize="none"
        style="width: 100%; margin-bottom: 20px"
      ></el-input>
      <div class="label">选择用户/角色</div>
      <el-select style="width: 100%; margin-bottom: 20px"></el-select>
      <div class="label">更新字段</div>
      <div class="content">
        <div class="empty">
          <img src="@/assets/lifecycle/empty.svg" />
          <div class="tip">
            暂无条件，<span style="color: #1aa1fb">迁移条件</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="setConditionDialog" title="新建状态流转规则" width="730">
    <div>
      <div>
        当工作项从<span>进行中</span>进入<span>已完成</span>时，需要满足
      </div>
      <div>
        <operator-select :width="240"></operator-select>
        必填，由
        <user-role-select :width="240"></user-role-select>
        操作
      </div>
      <div>
        且 <operator-select :width="240"></operator-select>
        <el-select></el-select>
        <el-select placeholder="请选择目标值"></el-select>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="setConditionDialog = false">取消</el-button>
        <el-button type="primary" @click="setConditionDialog = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref } from "vue";
  import OperatorSelect from "@/views/pm/globalSetting/globalLifecycle/lifecycle/components/operatorSelect.vue";
  import UserRoleSelect from "@/views/pm/globalSetting/globalLifecycle/lifecycle/components/userRoleSelect.vue";
  const setConditionDialog = ref(false);
  const currentDuration = ref<"before" | "after" | "duration">("before");
  const durationList = [
    {
      id: 0,
      type: "before",
      name: "之前",
    },
    {
      id: 1,
      type: "duration",
      name: "期间",
    },
    {
      id: 2,
      type: "after",
      name: "之后",
    },
  ];

  const handleDuration = (type: "before" | "after" | "duration") => {
    currentDuration.value = type;
  };

  const handleSettingBefore = () => {
    setConditionDialog.value = true;
  };
</script>

<style scoped lang="scss">
  .edgeConditionContainer {
    .top {
      box-sizing: border-box;
      height: 32px;
      display: flex;
      background: #f2f2f2;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      padding: 2px;
      margin-bottom: 20px;
      .topItem {
        flex: 1;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        color: #5e5e5e;
        border-radius: 4px;
        transition: all 0.3s;
      }
    }
    .label {
      color: #141414;
      font-size: 14px;
      height: 20px;
      line-height: 20px;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .content {
      height: 149px;
      border-radius: 4px;
      border: 1px solid #e6e6e6;
      margin-bottom: 20px;
      .empty {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 64px;
          height: 64px;
        }
        .tip {
          font-size: 14px;
          color: #5e5e5e;
          cursor: pointer;
        }
      }
    }
  }
</style>
